<template>
  <view class="start-index">
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ref="home"></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <!-- <Circle ref="circle"></Circle> -->
		<Manager ref="manager" v-if="userType == 0"></Manager>
		<Service ref="service" v-if="userType == 1"></Service>
		<Order ref="order" v-if="userType == 2"></Order>
      </scroll-view>
    </view>
    <!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Discovery ref="discovery"></Discovery>
      </scroll-view>
    </view> -->
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Message ref="message"></Message>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Mine ref="mine"></Mine>
      </scroll-view>
    </view>
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="#3668FC"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Home from './home/home.vue'
  // import Circle from './circle/circle.vue'
  import Manager from './manager/manager.vue'
  import Service from './service/service.vue'
  import Order from './order/order.vue'
  import Discovery from './discovery/discovery.vue'
  import Message from './message/message.vue'
  import Mine from './mine/mine.vue'
  
  export default {
    components: {
      Home,
      // Circle,
      Discovery,
      Message,
      Mine,
	  Manager,
	  Service,
	  Order
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          // {
          //   title: '首页',
          //   activeIcon: 'home-smile-fill',
          //   inactiveIcon: 'home-smile'
          // },
          // {
          //   title: '社区',
          //   activeIcon: 'topics-fill',
          //   inactiveIcon: 'topics'
          // },
          // {
          //   title: '发现',
          //   activeIcon: 'rocket',
          //   inactiveIcon: 'cube',
          //   activeIconColor: '#FFFFFF',
          //   inactiveIconColor: '#FFFFFF',
          //   iconSize: 50,
          //   out: true
          // },
          // {
          //   title: '消息',
          //   activeIcon: 'message-fill',
          //   inactiveIcon: 'message',
          //   count: 12
          // },
          // {
          //   title: '我的',
          //   activeIcon: 'my-fill',
          //   inactiveIcon: 'my'
          // }
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [],
		userType:0
      }
    },
    onLoad(options) {
      const index = Number(options.index || 0)
	  this.userType = 2
	  if(this.userType == 0){
		  // 管理端
		  this.tabbarList= [
          {
            title: '首页',
            activeIcon: 'home-smile-fill',
            inactiveIcon: 'home-smile'
          },
          {
            title: '服务管理',
            activeIcon: 'baby-fill',
            inactiveIcon: 'baby'
          },
          {
            title: '消息',
            activeIcon: 'message-fill',
            inactiveIcon: 'message',
            count: 12
          },
          {
            title: '我的',
            activeIcon: 'my-fill',
            inactiveIcon: 'my'
          }
        ]
	  } else if(this.userType == 1){
		  // 用户端
		  this.tabbarList= [
		    {
		      title: '首页',
		      activeIcon: 'home-smile-fill',
		      inactiveIcon: 'home-smile'
		    },
		    {
		      title: '我要服务',
		      activeIcon: 'baby-fill',
		      inactiveIcon: 'baby'
		    },
		    {
		      title: '消息',
		      activeIcon: 'message-fill',
		      inactiveIcon: 'message',
		      count: 12
		    },
		    {
		      title: '我的',
		      activeIcon: 'my-fill',
		      inactiveIcon: 'my'
		    }
		  ]
	  } else if(this.userType == 2){
		  // 护工端
		  this.tabbarList= [
		    {
		      title: '首页',
		      activeIcon: 'home-smile-fill',
		      inactiveIcon: 'home-smile'
		    },
		    {
		      title: '订单管理',
		      activeIcon: 'baby-fill',
		      inactiveIcon: 'baby'
		    },
		    {
		      title: '消息',
		      activeIcon: 'message-fill',
		      inactiveIcon: 'message',
		      count: 12
		    },
		    {
		      title: '我的',
		      activeIcon: 'my-fill',
		      inactiveIcon: 'my'
		    }
		  ]
	  }
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
        // if (index !== 1) {
        //   this.$refs?.circleRef?.stopAllVideo()
        // }
      },
      
      
      // 瀑布流导航页面滚动到底部
      tabbarPageScrollLower(e) {
        if (this.currentIndex === 2) {
          this.$refs.discovery.getRandomData && this.$refs.discovery.getRandomData()
        }
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
